<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>DOM操作之menu练习</title>
		<style type="text/css">
			.nav{
				position: relative;
			}
			
			.tabs{
				list-style: none;
				padding: 0;
			}
			
			.tabs a{
				text-decoration: none;
				color: #000;
				width: 80px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				display: inline-block;
			}
			
			.tabs>li{
				float: left;
				border-bottom: 1px solid #000;
			}
			
			.box{
				width: 80px;
				height: 39px;
				border: 1px solid #000;
				border-bottom: 1px solid #FFFFFF;
				position: absolute;
				top: 0;
				left: 0;
				transition: all 0.5s linear;
			}
		</style>
		
		<script src="js/jquery-1.12.4.js"  type="text/javascript"></script>
	</head>
	<body>
		
		<div class="nav">
			<ul class="tabs">
				<li id='l1'><a 	href="#">菜单一</a></li>
				<li><a  href="#">菜单二</a></li>
				<li><a  href="#">菜单三</a></li>
				<li><a  href="#">菜单四</a></li>
				<li><a  href="#">菜单五</a></li>
				<li><a  href="#">菜单六</a></li>
				<li><a  href="#">菜单七</a></li>
			</ul>
			<div class="box"></div>
		</div>
		
		
		
		<script type="text/javascript">
			// index的三种用法
			// 1.当前jquery对象在其同辈的位置
			// console.log($('#l1').index());
			
			// 2.参数jQuery对象或者参数DOM对象在前面jQuery对象集合中的位置
			// console.log($('ul>li').index($('#l1')));
			// console.log($('ul>li').index(document.getElementById('l1')));
			
			// 3.参数选择器字符串,返回前面jQuery对象在后面选择器选出集合中的位置.
			// console.log($('#l1').index('ul>li'));
			
			
			
			// 获得所有的a标签
			// 		根据a标签,获得对应的父标签li
			// 		要知道父标签li在所有li标签中的位置
			
			$(function(e){
				const LIWIDTH = 80;
				var $box = $('.box');
				$('.tabs>li>a').click(function(e){
					var i = $(e.target).parent().index();
					//			a			li		index

					$box.css('left', LIWIDTH * i);
				});
			});
			
		</script>
	</body>
</html>
